import React, { Component } from 'react';
import { NavBar } from 'antd-mobile';
import "./category.css";
import SearchInput from "../search/searchInput"
import myaxios from "../../utls/myaxios"
class category extends Component {
    //获取分类菜单的数据
    getCategory = (params) => {
        myaxios
        .get("categories")
        .then(res => {
            this.setCategory(res)
        })
        .catch(err => {
                console.log(err);
            })
    }
    //设置分类菜单的数据
    setCategory = (res,is_cache) => {
        let categories_cache = {}
        if(is_cache){
            //直接获取本地缓存中的数据
            categories_cache = JSON.parse(localStorage.getItem("categories_cache"))
        }else{
            categories_cache = {
                date :Date.now(),
                categories:res
            }
        }
        //缓存请求的数据
      
        //缓存到本地
        localStorage.setItem("categories_cache",JSON.stringify(categories_cache))
        this.setState({
            category: res,
            category_right: res[0].children,
        })
    }
    componentDidMount() {
        //进来的时候先要旁段本地的缓存是否过期 ， 如果没有过期直接取本地的缓存
        let categories_cache = localStorage.getItem("categories_cache")
        //如果本地缓存不为空
        if(categories_cache){
            //判断本地缓存是否过期
            let current_time = Date.now()
            //存储时间
            let storage_time = JSON.parse(categories_cache).date;
            if(current_time - storage_time> 1000*60*60){
                //一小时后 从新发请求
                this.getCategory()
            }else{
                //缓存还没过期
                this.setCategory(JSON.parse(categories_cache).categories,true)
            }
        }else{
            this.getCategory()
        }
    }
    state = {
        category: [],//返回的菜单数据
        category_right: [], //右边数据
        select_index: 0 //当前选中的左边的菜单
    }
    handleMp = (e) => {
        //获取点击的项
        let select_i = e.target.getAttribute('select_x')
        this.setState({
            select_index: select_i,
            //点击时右边数据
            category_right: this.state.category[select_i].children
        })
    }
    //右边图片点击触发
    handleProductItem = (e) => {
        let cid = e.target.getAttribute('data-index')
        // console.log(cid);
        this.props.history.push("/goodlist/" + cid)
    }
    render() {
        return (
            <div className="yg-category-box">
                {/* 首页导航条的开始 */}
                <div className="yg-index-nav">
                    <NavBar
                        className="index-nav"
                    >商品分类</NavBar>
                </div>
                {/* 首页导航条的结束 */}
                {/* 首页搜索框的开始 */}
                <div className="yg-index-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 首页搜索框的结束 */}
                {/* 分类菜单的开始 */}
                <div className="yg-category-content">
                    <div className="content-left" onClick={this.handleMp}>
                        {
                            this.state.category && this.state.category.map((v, i) => {
                                return <div className={this.state.select_index == i ? "active content-left-item" : "content-left-item"} key={v.cat_id}
                                    select_x={i}
                                >
                                    {v.cat_name}
                                </div>
                            })
                        }
                    </div>
                    <div className="content-right">
                        {
                            this.state.category_right.map((v, i) => {
                                return <div className="content-right-item" key={v.cat_id}>
                                    {/* 二级菜单标题开始 */}
                                    <div className="content-item-title">
                                        {"♥"}{v.cat_name}{"♥"}
                                    </div>
                                    {/* 二级菜单标题结束 */}
                                    {/* 产品的列表的开始 */}
                                    <div className="product-start" onClick={this.handleProductItem}>
                                        {
                                            v.children && v.children.map(vv => {
                                                return <div className="product-items-list" key={vv.cat_id} >
                                                    <img src={vv.cat_icon} alt="" data-index={vv.cat_id} />
                                                    <div className="title" data-index={vv.cat_id}>
                                                        {vv.cat_name}
                                                    </div>
                                                </div>
                                            })

                                        }
                                    </div>
                                    {/* 产品的列表的结束 */}
                                </div>
                            })
                        }
                    </div>
                </div>
                {/* 分类菜单的结束 */}
            </div>
        );
    }
}

export default category;
